/*
 * @description: 店铺信息/基础信息
 * @Author: along
 * @Date: 2021-04-12
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="shopBasicInfo">
        <div class="_container">
            <p class="_container_title">基础信息</p>

            <!-- 基础信息 -->
            <div class="_basic">
                <div class="_basic_left">
                    <div class="_basic_upload">
                        <template v-if="!formData.shop_logo">
                            <el-upload
                                class="avatar_uploader"
                                action="upload"
                                accept="image/*"
                                list-type="picture-card"
                                :show-file-list="false"
                                :http-request="(e) => {fnUploadImage(e, 'shop_logo')}"
                            >
                                <div class="_basic_none">
                                    <img src="@/assets/image/basic_add.png" class="_basic_icon">
                                    <p class="_basic_text">点击上传</p>
                                </div>
                            </el-upload>
                        </template>
                        <template v-if="formData.shop_logo">
                            <img :src="formData.shop_logo" class="_basic_logo">
                        </template>
                    </div>
                    <p class="_basic_desc">店铺logo</p>
                    <p class="_basic_target" @click="handleCheckNotice()">上传须知</p>
                </div>
                <div class="_basic_right">
                    <div class="_basic_items">
                        <p class="_basic_item_title">店铺名称：</p>
                        <p class="_basic_item_name" v-if="!isEdit">{{ formData.shop_title }}</p>
                        <el-input
                            v-if="isEdit"
                            v-model="formData.shop_title"
                            size="small"
                            placeholder="请输入店铺名称，建议15字以内"
                            maxlength="30"
                            show-word-limit
                            :style="{width: '300px'}"
                        />
                        <div class="_basic_side">
                            <i class="iconfont icon-bianji1"></i>
                            修改
                        </div>
                        <p class="_basic_line"></p>
                        <p class="_basic_title_notice" @click="$refs.perfectNotice.show()">取名注意事项</p>
                    </div>
                    <div class="_basic_items">
                        <p class="_basic_item_title">店铺认证：</p>
                        <p class="_basic_item_name">{{ '--' }}</p>
                    </div>
                    <div class="_basic_items">
                        <p class="_basic_item_title">创建时间：</p>
                        <p class="_basic_item_name">{{ '--' }}</p>
                    </div>
                    <div class="_basic_items">
                        <p class="_basic_item_title">入驻人手机号：</p>
                        <p class="_basic_item_name">{{ '--' }}</p>
                    </div>
                </div>
            </div>

            <!-- 联系方式 -->
            <p class="_container_title">联系方式</p>
            <el-form
                :model="formData"
                :rules="rules"
                ref="ruleForm"
                label-width="120px"
                class="demo_ruleForm"
            >
                <el-form-item
                    label="紧急联系人姓名"
                >
                    <el-input
                        size="medium"
                        v-model="formData.user_name"
                        placeholder="请输入紧急联系人姓名"
                        :style="{width: '488px'}"
                        :disabled="!isEdit ? true : false"
                    />
                </el-form-item>
                <el-form-item
                    label="紧急联系人号码"
                >
                    <div class="_form_wrap">
                        <el-input
                            size="medium"
                            v-model="formData.phone"
                            placeholder="请输入紧急联系人号码"
                            :style="{width: '290px'}"
                            :disabled="!isEdit ? true : false"
                        />
                        <el-button
                            type="default"
                            class="container-phone-wrap-button"
                            @click="fnSendBindCode()"
                            style="width:178px;margin-left:20px"
                            :disabled="!isEdit ? true : sendCode"
                        >
                            {{ !sendCode ? sendText : codeTime + 's' }}
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item
                    label="验证码"
                >
                    <el-input
                        size="medium"
                        v-model="code"
                        placeholder="请输入验证码"
                        :style="{width: '290px'}"
                        :disabled="!isEdit ? true : false"
                    />
                </el-form-item>
                <el-form-item
                    label="联系地址"
                    prop="reginValue"
                >
                    <div class="_form_adress">
                        <el-cascader
                            v-model="formData.reginValue"
                            :options="areaList"
                            :props="{ expandTrigger: 'hover' }"
                            @change="fnChangeAdress"
                            clearable
                            :filterable="true"
                            separator="-"
                            size="medium"
                            placeholder="请选择省市区"
                            :style="{width: '488px'}"
                            :disabled="!isEdit ? true : false"
                        />
                        <el-input
                            size="medium"
                            v-model="formData.detail_info"
                            placeholder="请输入详细地址"
                            :style="{width: '488px', marginTop: '10px'}"
                            :disabled="!isEdit ? true : false"
                        />
                        <p class="_form_adress_desc">以上地址将作为经营者相关争议解决的唯一有效送达地址，请认真填写</p>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="_basic_label">
            <el-checkbox v-model="checkedBasic" />
            <p class="_basic_label_text">我声明，此页面内容由本店铺自行填写和发布，内容真实有效，如有相关法律法规，平台协议及平台规则之规定冲突的，以法律法规、平台协议及平台规则规定为准</p>
        </div>

        <div class="_basic_foot">
            <el-button
                v-if="isEdit"
                size="medium"
                type="default"
                :style="{width: '120px', marginRight: '32px', borderRadius: '18px !important'}"
                @click="handleCanceData()"
            >
                取消
            </el-button>
            <el-button
                size="medium"
                type="primary"
                :style="{width: '120px', borderRadius: '18px !important'}"
                @click="handleChangeData('ruleForm')"
            >
                {{ !isEdit ? '编辑' : '保存' }}
            </el-button>
        </div>

        <!-- 取店名称 -->
        <perfect-notice ref="perfectNotice"></perfect-notice>
    </div>
</template>

<script>
import perfectNotice from '@/components/dialog/perfect-notice.vue';
export default {
    components: {
        perfectNotice
    },
    data () {
        const validateDetailInfo = (rule, value, callback) => {
            if(!this.formData.reginValue.length) {
                callback(new Error('请选择联系地址'));
            }
            if(!this.formData.detail_info) {
                callback(new Error('请填写详细地址'));
            }
            if(this.formData.reginValue.length && this.formData.detail_info) {
                callback();
            }
        };

        return {
            isEdit: false,//是否是编辑状态 false：编辑状态 true:不是编辑状态
            formData: {
                shop_logo: 'http://pic.wxhand.com/dev/wei_image/7fc8739283fbbc233046ae79936d1fd4.jpg',
                shop_title: '糖果果的店铺',
                user_name: '',
                phone: '',
                reginValue: [],//联系地址
                province_name: '',//省份名称
                city_name: '',//城市名称
                county_name: '',//区名称
                detail_info: ''//详细地址
            },
            rules: {
                reginValue: [
                    { required: true,message: '请填写地址,不可以为空', trigger: 'change' },
                    { validator: validateDetailInfo, trigger: 'change' }
                ]
            },
            areaList: [],
            checkedBasic: false,
            //获取验证码字段
            code: '',
            sendCode: false,
            computedTime: 'time',
            sendText: '获取验证码',
            codeTime: 60,
        };
    },
    mounted () {
        this.handleCheckAreaList();
        this.getInfo();
    },
    methods: {
        /**
         * @description 获取店铺基础数据
         */
        getInfo () {
            this.$post('', {}, (resp) => {
                if (resp.code == 1) {
                    this.formData = {
                        ...resp.data
                    };
                } else {
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 保存编辑数据
         */
        handleChangeData (formName) {
            // 进入编辑状态
            if(!this.isEdit) {
                this.isEdit = true;
                return false;
            }

            // 保存数据
            if(this.isEdit) {
                if(!this.checkedBasic) {
                    this.$notify({
                        type: 'warning',
                        title: '温馨提示',
                        duration: 2000,
                        message: '请先勾选声明'
                    });
                    return false;
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$post('', {}, (resp) => {
                            if (resp.code == 1) {
                                this.isEdit = true;
                                this.getInfo();
                            } else {
                                this.$notify({
                                    type: 'warning',
                                    title: '警告',
                                    duration: 2000,
                                    message: resp.msg
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },

        /**
         * @description 取消编辑数据
         */
        handleCanceData () {
            this.$confirm('取消后修改的数据将不会进行保存,是否取消?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.isEdit = false;
                this.getInfo();
            });
        },

        /**
         * @description 获取省市区数据
         */
        handleCheckAreaList () {
            let list = [];

            this.$post('/Localinfo/getAreaAddressCodeList', {}, resp => {
                if (resp.code == 1) {
                    if(resp.code == 1) {
                        let regin = resp.data.province_list;

                        regin.forEach((element,key) => {
                            list.push({
                                value: element.name,
                                label: element.name,
                                children: []
                            });
                            if(element.city_list) {
                                element.city_list.forEach((option,i) => {
                                    list[key].children.push({
                                        value: option.name,
                                        label: option.name,
                                        children: []
                                    });
                                    if(option.area_list) {
                                        option.area_list.map(item => {
                                            list[key].children[i].children.push({
                                                value: item.name,
                                                label: item.name
                                            });
                                        });
                                    }
                                });
                            }
                        });
                        setTimeout(()=>{
                            this.areaList = list;
                        },100);
                    }
                } else {
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 获取联系地址
         */
        fnChangeAdress () {
            if(this.ruleForm.reginValue && this.ruleForm.reginValue.length == 3) {
                this.ruleForm.province_name = this.ruleForm.reginValue[0];
                this.ruleForm.city_name = this.ruleForm.reginValue[1];
                this.ruleForm.county_name = this.ruleForm.reginValue[2];
            } else {
                this.ruleForm.province_name = this.ruleForm.city_name = this.ruleForm.county_name = '';
            }
        },

        /**
         * @description 图片上传处理
         */
        fnUploadImage(e, type) {
            let pic = new FormData();

            pic.append('image', e.file);
            this.$upload({
                url: '/EcommerceAlipay/uploadPicture',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        this.$set(this.formData, type, resp.data.url);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            cneter: true
                        });
                    }
                }
            });
        },

        /**
         * @description 上传须知
         */
        handleCheckNotice () {
            //
        },

        /**
         * @description 发送验证码
         */
        fnSendBindCode () {
            if(!this.formData.phone) {
                this.$notify({
                    title: '警告',
                    message: '紧急联系人号码不可以为空',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(this.formData.phone.length !== 11) {
                this.$notify({
                    title: '警告',
                    message: '请输入正确的手机号码',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            this.sendCode = true;
            this.fnCompitedTime();
            this.$post('',{},resp => {
                if (resp.code == 1) {
                    this.$notify({
                        title: '成功',
                        message: '发送成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
        * @description 计时器递归调用
        */
        fnCompitedTime (param) {
            let arr = Array.prototype.slice.call(arguments);

            if(this.codeTime == 60 || arr.length > 0) {
                clearTimeout(this.computedTime);
                this.computedTime = setTimeout(()=>{
                    if(this.codeTime > 0) {
                        this.codeTime--;
                        this.fnCompitedTime(1);
                    } else {
                        this.sendText = '再次发送';
                        this.sendCode = false;
                        this.codeTime = 60;
                        clearTimeout(this.computedTime);
                        return;
                    }
                },1000);
            }
        },
    }
};
</script>

<style lang="less" scoped>
.shopBasicInfo {
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;
    ._container {
        width: 100%;
        margin: 0 24px 24px 24px;
        box-sizing: border-box;
        padding: 12px 32px 32px 32px;
        border: 1px rgba(238, 238, 238, 1) solid;
        background-color: rgba(251, 251, 251, 1);
        display: flex;
        flex-direction: column;
        border-radius: 4px;
        ._container_title {
            height: 46px;
            width: 100%;
            line-height: 46px;
            box-sizing: border-box;
            border-bottom: 1px rgba(240, 242, 245, 1) solid;
        }
        ._basic {
            width: 100%;
            display: flex;
            padding: 24px 52px 52px 52px;
            ._basic_left {
                width: 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                ._basic_upload {
                    width: 100px;
                    height: 100px;
                    overflow: hidden;
                    .avatar_uploader {
                        width: 100px;
                        height: 100px;
                    }
                    ._basic_none {
                        width: 100px;
                        height: 100px;
                        border: 1px rgba(216, 216, 216, 1) solid;
                        border-radius: 4px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        ._basic_icon {
                            width: 24px;
                            height: 24px;
                            margin-bottom: 8px;
                        }
                        ._basic_text {
                            font-size: 12px;
                            color: rgba(136, 144, 156, 1);
                        }
                    }
                }
                ._basic_logo {
                    width: 100px;
                    height: 100px;
                    border-radius: 4px;
                }
                ._basic_desc {
                    color: rgba(136, 136, 136, 1);
                    font-size: 14px;
                    margin: 12px 0;
                }
                ._basic_target {
                    color: rgba(32, 160, 255, 1);
                    font-size: 12px;
                    cursor: pointer;
                }
            }
            ._basic_right {
                display: flex;
                flex-direction: column;
                margin-left: 52px;
                ._basic_items {
                    display: flex;
                    align-items: center;
                    margin-bottom: 24px;
                    ._basic_item_title {
                        color: rgba(136, 136, 136, 1);
                        font-size: 14px;
                        white-space: nowrap;
                    }
                    ._basic_item_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        white-space: nowrap;
                    }
                    ._basic_side {
                        color: rgba(153, 153, 153, 1);
                        font-size: 12px;
                        margin-left: 12px;
                        cursor: pointer;
                        i {
                            font-size: 12px;
                        }
                        &:hover {
                            color: rgba(32, 160, 255, 1);
                        }
                    }
                    ._basic_line {
                        width: 1px;
                        height: 12px;
                        background-color: rgba(234, 234, 242, 1);
                        margin-right: 10px;
                    }
                    ._basic_title_notice {
                        color: rgba(32, 160, 255, 1);
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
            }
        }
        .demo_ruleForm {
            box-sizing: border-box;
            padding-left: 80px;
            padding-top: 24px;
            ._form_wrap {
                height: 36px;
                display: flex;
                align-items: center;
            }
            ._form_adress {
                display: flex;
                flex-direction: column;
                &_desc {
                    color: rgba(153, 153, 153, 1);
                    font-size: 12px;
                    white-space: nowrap;
                }
            }
        }
    }
    ._basic_label {
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        padding: 24px 56px;
        ._basic_label_text {
            flex: 1;
            color: rgba(153, 153, 153, 1);
            font-size: 12px;
            line-height: 20px;
            margin-top: -2px;
            margin-left: 10px;
        }
    }
    ._basic_foot {
        width: 100%;
        height: 68px;
        border-top: 1px rgba(240, 242, 245, 1) solid;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>

<style lang="less">
.shopBasicInfo {
    .el-tabs__item {
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none !important;
    }
    .el-tabs__item:focus.is-active.is-focus:not(:active) {
        -webkit-box-shadow: none;
        box-shadow: none !important;
    }
    .el-upload--picture-card {
        width: 100px;
        height: 100px;
        border: none;
        line-height: 0px;
    }
    .el-button {
        border-radius: 4px !important;
    }
}
</style>